<template>
  <div class="sms-recharge">
    <div style="position: relative;">
      <tabs :tabs="tabLists" class="tab" :handleClick="handleClick"></tabs>
      <el-button
        type="text"
        class="admin-control-add"
        v-if="showAdd == 'group'"
        @click="dialogFormVisible = true"
      >+ 新增集团</el-button>
      <el-button
        type="text"
        class="admin-control-add"
        v-if=" showAdd == 'admin-edit'"
        @click="addNew = true"
      >+ 新增管理员</el-button>
      <el-button
        type="text"
        class="admin-control-add"
        v-if=" showAdd == 'store-permission'"
        @click="shop = true"
      >+ 新增店铺</el-button>
    </div>
    <router-view :changed="num"></router-view>
    <el-dialog title="新增集团" :visible.sync="dialogFormVisible" class="admin-control-edit">
      <el-form :model="form" label-position="right" :rules="rules" ref="ruleForm">
        <el-form-item label="集团名称" :label-width="formLabelWidth" prop="depart_name">
          <el-input v-model.trim="form.depart_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增管理员" :visible.sync="addNew" class="admin-control-edit">
      <el-form :model="adminForm" label-position="right" :rules="rule1" ref="ruleForm1">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="admin_name">
          <el-input v-model.trim="adminForm.admin_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="admin_password">
          <el-input v-model.trim="adminForm.admin_password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirm_password">
          <el-input v-model.trim="adminForm.confirm_password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNew = false">取 消</el-button>
        <el-button type="primary" @click="addNewAdmin">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新建店铺" :visible.sync="shop" class="admin-control-edit">
      <el-form :model="shopForm" label-position="right" :rules="rule2" ref="ruleForm2">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="member_name">
          <el-input v-model.trim="shopForm.member_name" autocomplete="off" @change="handleChange" @input="handleInput"></el-input>
          <span class="s_error" v-if="error">{{error}}</span>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model.trim="shopForm.member_passwd" autocomplete="off"></el-input>
          <el-checkbox v-model="checked" style="margin-left: 20px" @change="changeBox">需要验证密码</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shop = false">取 消</el-button>
        <el-button type="primary" @click="addShop" :disabled="error">确 定</el-button>
      </div>
    </el-dialog>
    <sms-verification :options="smsDialogOptions" @update="smsDialogUpdate"></sms-verification>
  </div>
</template>
<script>
import tabs from "@/components/tabs/tabs";
import SmsVerification from "@/components/home/sms-verification.vue";
export default {
  name: "sass",
  components: {
    tabs, SmsVerification
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.adminForm.admin_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      tabLists: [
        { label: "经销商管理", name: "store-permission" },
        { label: "集团列表", name: "group" }
      ],
      num: 1,
      dialogFormVisible: false,
      formLabelWidth: "80px",
      form: {
        depart_name: ""
      },
      adminForm: {
        depart_level: "2",
        depart_id: "",
        admin_name: "",
        admin_password: "",
        confirm_password: ""
      },
      shopForm: {
        member_name: "",
        need_password: 0,
        member_passwd: ""
      },
      groupList: [],
      rules: {
        depart_name: {
          required: true,
          message: "请输入集团名称",
          trigger: "blur"
        }
      },
      rule2: {
        member_name: {
          required: true,
          message: "请输入店铺名称",
          trigger: "blur"
        }
      },
      rule1: {
        admin_name: {
          required: true,
          message: "请填写用户名",
          trigger: "blur"
        },
        admin_password: {
          required: true,
          message: "请填写密码",
          trigger: "blur"
        },
        confirm_password: {
          required: true,
          validator: validatePass2,
          trigger: "blur"
        }
      },
      showAdd: false,
      addNew: false,
      shop: false,
      checked: false,
      error: null,
      smsDialogOptions: { visible: false }
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.$router.push({
          path: "store-permission"
        });
      } else if (tab.index == 1) {
        this.$router.push({
          path: "group"
        });
      } else if (tab.index == 2) {
        if (this.tabLists.length == 4) {
          this.$router.push({
            path: "couple-edit"
          });
        } else {
          this.$router.push({
            path: "shop-edit"
          });
        }
      } else if (tab.index == 3) {
        this.$router.push({
          path: "admin-edit"
        });
      }
    },
    handleInput(val) {
      this.error = null
    },
    handleChange(val) {/*
      this.$http.post("/admin/depart/index.php?act=departManage&op=checkUser", {params: {username: val}})
      .then(res => {
        if(res.code != 1) {
          this.error = '该用户无法创建店铺'
        } else {
          this.error = null
        }
      }).catch(error => {
        this.$message.error(`${error}`)
      })*/
    },
    // 新增集团
    addAdmin() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$http
            .post(
              "/admin/depart/index.php?act=departManage&op=addDepart",
              this.form
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.dialogFormVisible = false;
                  this.num++;
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
                this.$refs["ruleForm"].resetFields();
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        } else {
          return false;
        }
      });
    },
    // 新增管理员
    addNewAdmin() {
      this.$refs.ruleForm1.validate(valid => {
        if (valid) {
          this.$http
            .post(
              "/admin/depart/index.php?act=departManage&op=addManage",
              this.adminForm
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.addNew = false;
                  this.num++;
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        } else {
          return false;
        }
      });
    },
    smsDialogUpdate(res) {
      this.addShop({ verified: true })
    },
    // 新增店铺
    addShop(obj) {
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          if (!obj.verified) {
            this.smsDialogOptions = { visible: true, type: 1 }
            return
          }
          this.$http
            .post(
              "/admin/store/index.php?act=storeManage&op=addStoreBefore",
              this.shopForm
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.shop = false;
                  this.$router.push({
                    path: "shop-edit",
                    query: {
                      name: this.shopForm.member_name,
                      id: res.data.member_id
                    }
                  });
                } else {
                  // this.error = res.msg
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        }
      });
    },
    // 复选框改变
    changeBox(val) {
      if (val) {
        this.shopForm.need_password = 1;
      } else {
        this.shopForm.need_password = 0;
      }
    },
    // 获取集团
    getGroupList() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=firstDeparts")
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          }
        });
    }
  },
  watch: {
    "$route.path"() {
      //页面刷新就执行
      this.adminForm.depart_id = this.$store.state.couple.id;
      let path = this.$route.path.split("/").pop();
      this.showAdd = path;
      if (path == "couple-edit" || path == "admin-edit") {
        this.tabLists = [
          { label: "经销商管理", name: "store-permission" },
          { label: "集团列表", name: "group" },
          { label: "组合编辑", name: "couple-edit" },
          { label: "管理员管理", name: "admin-edit" }
        ];
      } else if (path == "shop-edit") {
        this.tabLists = [
          { label: "经销商管理", name: "store-permission" },
          { label: "集团列表", name: "group" },
          { label: "编辑店铺", name: "shop-edit" }
        ];
      } else {
        this.tabLists = [
          { label: "经销商管理", name: "store-permission" },
          { label: "集团列表", name: "group" }
        ];
      }
    },
    dialogFormVisible(n, o) {
      if (!n) {
        this.$refs.ruleForm.resetFields();
      }
    },
    addNew(n, o) {
      if (!n) {
        this.$refs.ruleForm1.resetFields();
      }
    },
    shop(n, o) {
      if (!n) {
        this.$refs.ruleForm2.resetFields();
        this.error = null
      }
    }
  },
  mounted() {
    //页面刷新就执行
    this.adminForm.depart_id = this.$store.state.couple.id;
    let path = this.$route.path.split("/").pop();
    this.showAdd = path;
    if (path == "couple-edit" || path == "admin-edit") {
      this.tabLists = [
        { label: "经销商管理", name: "store-permission" },
        { label: "集团列表", name: "group" },
        { label: "组合编辑", name: "couple-edit" },
        { label: "管理员管理", name: "admin-edit" }
      ];
    } else if (path == "shop-edit") {
      this.tabLists = [
        { label: "经销商管理", name: "store-permission" },
        { label: "集团列表", name: "group" },
        { label: "编辑店铺", name: "shop-edit" }
      ];
    } else {
      this.tabLists = [
        { label: "经销商管理", name: "store-permission" },
        { label: "集团列表", name: "group" }
      ];
    }
  }
};
</script>
<style scoped lang="scss">
.el-input,
.el-select {
  width: 60%;
}

.admin-control-add {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.s_error {
  margin-left: 10px;
  color: #F56C6C;
}
.el-dialog__wrapper /deep/ {
  .el-dialog .el-dialog__body {
    padding: 25px 20px
  }
}
</style>
